<template>
  <div
      class="showPanel flex flex-col gap-y-[20px] transitionPanel h-full animate__fadeInRight animate__animated relative"
  >
    <div class="relative h-full text-[#fff]">
      <div
          class="absolute flex flex-col gap-y-[20px] top-0 left-0 right-0 bottom-0 py-[50px] pr-[10px]"
      >
        <!--          园区能耗分析-->
        <!--        <base-card class="flex-1 overflow-hidden" title="园区能耗分析">-->
        <!--          <div class="flex items-center gap-[5px]">-->
        <!--            电能消耗百分百-->
        <!--            <a-progress-->
        <!--              :percent="90"-->
        <!--              class="flex"-->
        <!--              style="width: 80%"-->
        <!--              :stroke-color="{-->
        <!--                from: '#65A4CC',-->
        <!--                to: '#B1FAD8',-->
        <!--              }"-->
        <!--            ></a-progress>-->
        <!--          </div>-->
        <!--          <BaseChart :options="topOption"></BaseChart>-->
        <!--        </base-card>-->
        <!--          车辆通行分析-->
        <!--        <base-card class="flex-1 overflow-hidden" title="车辆通行分析">-->
        <!--          <div class="flex items-center gap-[20px]">-->
        <!--            <img-->
        <!--              src="@/assets/images/bigscreen/car.png"-->
        <!--              class="w-[60px] h-[60px]"-->
        <!--            />-->
        <!--            <div class="ml-[10px]">-->
        <!--              <div class="text-[18px]">驶入车辆总量</div>-->
        <!--              <div class="light_blue_text">4444</div>-->
        <!--            </div>-->
        <!--            <div>-->
        <!--              <div class="text-[18px]">驶入车辆总量</div>-->
        <!--              <div class="text-[#C5AC89]">445229</div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--          <base-chart :options="middleOption"></base-chart>-->
        <!--        </base-card>-->
        <!--          应急事件分类-->
        <base-card class="h-[33%] overflow-hidden" title="园区卡扣违章数量排名">
          <base-table
              :show-tool="false"
              :column="column"
              :data-source="tableData"
              :show-pagination="false"
              class="reset-table"
          ></base-table>
        </base-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import baseTable from "@/components/three/component/baseTable/index.jsx";
import BaseCard from "@/components/three/component/baseCard.vue";
import {ref, onMounted} from "vue";
import {getVehiclePositionLoginMds} from "@/api/threeJs/threeJsApi.js";
import Hls from "hls.js";
import {CommonEchartLegend} from "@/utils/index.js";
import {getHKKaKou} from "@/api/dataScreen/dataScreen.js";

const column = ref([
  {
    key: "index",
    align: "center",
    label: "序号",
  },
  {
    key: "name",
    align: "center",
    label: "卡扣名称",
  },
  {
    key: "number",
    align: "center",
    label: "违章数量",
  },
]);
const tableData = ref([
  {
    index: 1,
    name: "园区卡扣1",
    number: 10,
  },
]);
const videoIndex = ref(0);
const allVideos = ref([]);
onMounted(() => {
  allVideos.value = [];
  getHKKaKou().then((res) => {
    tableData.value = res.data.map((item, index) => {
      return {
        index: index + 1,
        name: item.pointIntervalName,
        number: item.illegalTotal,
      };
    });
  });
  // getVehiclePositionLoginMds().then((res) => {
  //   if (!res.code) {
  //     res.data.map((item) => {
  //       item.floors?.map((f) => {
  //         allVideos.value = allVideos.value.concat(f.cameras);
  //       });
  //     });
  //     setTimeout(() => {
  //       changeVideo(0);
  //     }, 1000);
  //   }
  // });
});
const changeVideo = (index) => {
  let videoDom = document.getElementById("video");
  videoIndex.value = index;
  if (videoDom?.currentTime) {
    videoDom.currentTime = videoDom.duration;
    videoDom?.pause();
    videoDom.currentTime = 0;
    videoDom?.play();
  }
  const hls = new Hls();
  hls.loadSource("http://220.161.87.62:8800/hls/0/index.m3u8"); // 你的 m3u8 地址
  hls.attachMedia(videoDom);
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    videoDom.play();
    videoDom.muted = true;
  });
};
</script>
<style scoped lang="less">
.transitionPanel {
  transition: right 0.7s ease-in-out,
  width 1s ease-in-out,
  opacity 0.7s ease-in-out;
}

.showPanel {
  opacity: 1;
  right: 0;
  //width: 100%;
}

.hidePanel {
  opacity: 0;
  //width: 0%;
  right: -120%;
}

.opt {
  transition: right 0.7s ease-in-out,
  left 0.7s ease-in-out;
}

.optToLeft {
  right: 0px;
}

.optToRight {
  right: 360px;
}

:deep(.ant-progress-text) {
  color: #fff;
  font-size: 12px;
}
</style>
